<template>
  <div class="app-container">
    <h4>借款信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
        <tr>
          <th width="15%">借款金额</th>
          <td width="35%">{{ borrowInfo.amount }}元</td>
          <th width="15%">借款期限</th>
          <td width="35%">{{ borrowInfo.period }}个月</td>
        </tr>
        <tr>
          <th>年化利率</th>
          <td>{{ borrowInfo.borrowYearRate * 100 }}%</td>
          <th>还款方式</th>
          <td>{{ borrowInfo.returnMethodStr }}</td>
        </tr>

        <tr>
          <th>资金用途</th>
          <td>{{ borrowInfo.moneyUseStr }}</td>
          <th>状态</th>
          <td>{{ borrowInfo.statusStr }}</td>
        </tr>
        <tr>
          <th>创建时间</th>
          <td>{{ borrowInfo.createTime }}</td>
          <th></th>
          <td></td>
        </tr>
      </tbody>
    </table>

    <h4>借款人信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
        <tr>
          <th width="15%">借款人</th>
          <td width="35%">
            <b>{{ borrowInfo.borrower.name }}</b>
          </td>
          <th width="15%">手机</th>
          <td width="35%">{{ borrowInfo.borrower.mobile }}</td>
        </tr>
        <tr>
          <th>身份证</th>
          <td>{{ borrowInfo.borrower.idCard }}</td>
          <th>性别</th>
          <td>{{ borrowInfo.borrower.sex === 1 ? "男" : "女" }}</td>
        </tr>
        <tr>
          <th>年龄</th>
          <td>{{ borrowInfo.borrower.age }}</td>
          <th>是否结婚</th>
          <td> {{ borrowInfo.borrower.sex === 1 ? "是" : "否" }}</td>
        </tr>
        <tr>
          <th>学历</th>
          <td>{{ borrowInfo.borrower.educationStr }}</td>
          <th>行业</th>
          <td>{{ borrowInfo.borrower.industryStr }}</td>
        </tr>
        <tr>
          <th>月收入</th>
          <td>{{ borrowInfo.borrower.income }}</td>
          <th>还款来源</th>
          <td>{{ borrowInfo.borrower.returnSourceStr }}</td>
        </tr>
        <tr>
          <th>创建时间</th>
          <td>{{ borrowInfo.borrower.createTime }}</td>
          <th>状态</th>
          <td>
             <el-tag v-if="borrowInfo.borrower.status === 0" type="info" size="mini">
            未认证
          </el-tag>
          <el-tag v-if="borrowInfo.borrower.status === 1" type="warning" size="mini">
            认证中
          </el-tag>
          <el-tag v-if="borrowInfo.borrower.status === 2" type="success" size="mini">
            认证通过
          </el-tag>
          <el-tag v-if="borrowInfo.borrower.status === -1" type="danger" size="mini">
            认证失败
          </el-tag>
          </td>
        </tr>
      </tbody>
    </table>

    <el-row style="text-align: center; margin-top: 40px">
      <el-button @click="back"> 返回 </el-button>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

const cover = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return (
    [year, month, day].map(formatNumber).join("-") +
    " " +
    [hour, minute, second].map(formatNumber).join(":")
  );
};
const formatNumber = (n) => {
  n = n.toString();
  return n[1] ? n : "0" + n;
};

export default {
  data() {
    return {
      borrowInfo: {},
    };
  },
  created() {
    this.init();
  },

  methods: {
    init() {
      axios
        .get("http://localhost:8088/borrowInfo/getBorrowInfo")
        .then((response) => {
          this.borrowInfo = response.data;
          this.borrowInfo.createTime = cover(response.data.createTime)
          this.borrowInfo.borrower.createTime = cover(response.data.borrower.createTime)
        })
        .then((response) => {
          this.findAll();
        })
        .catch((error) => {});
    },
    back() {
      this.$router.push("/borrowerlist");
    },
  },
};
</script>
<style scoped>
.app-container {
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  font-size: 14px;
  color: #333;
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
  text-align: right;
  width: 120px;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.active_content {
  padding: 0 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.active_content h4 {
  /*line-height: 0;*/
}
.active_content span {
  font-size: 12px;
  color: #999;
}
</style>
